<!-- 置顶消息块 -->
<template>
  <div class="top">
    <div class="box" v-for="(item, index) in info" :key="index">
      <span class="icon">置顶</span>
      <span class="text">{{ item }}</span>
    </div>
  </div>
</template>

<style styleLang="postcss" scoped>

.top {
  width: 100%;
  /* height: 50px; */
  margin-top: 3%;
  padding-top: 0.2%;
  padding-bottom: 3%;
  background: #fff;
  position: relative;
}
.box {
  width: 80%;
  height: 25px;
  border-bottom: 1px #e4e4e4 solid;
  margin-left: 15px;
  padding-bottom: 5px;
  margin-top: 6px;
}
.box .icon {
  font-size: 12px;
  color: #fff;
  background: #00aeff;
  padding: 3px;
  border-radius: 6%;
}
.box .text {
  padding: 6px;
  font-size: 14px;
}
</style>

<script>
export default {
  data() {
    return {
      info: [
        "[公告]关于恶意盗用发布人信息",
        "发帖注意事情和流程",
        "我的邪恶王国"
      ]
    };
  }
};
</script>
